<template>
	<view class="wrapper">
		<view class="header">
			<image v-if="config.logo" :src="config.logo" mode=""></image>
			<text>{{config.sys_title}}</text>
		</view>
		<view class="form">
			<view class="title">注册</view>
			<u-form labelPosition="left" :model="model" :rules="rules" ref="uForm">
				<u-form labelPosition="left" :model="model" :rules="rules" ref="uForm">
					<u-form-item label="+86" prop="model.phone" borderBottom ref="item1"><u--input v-model="model.phone"
							border="none"></u--input></u-form-item>
					<u-form-item label=" " prop="model.code" labelWidth="10" borderBottom>
						<u--input v-model="model.code" border="none" placeholder="请填写验证码"></u--input>
						<u-button slot="right" @tap="getCode" :text="tips" type="primary"
							:disabled="disabled1"></u-button>
					</u-form-item>
					<u-form-item label=" " prop="model.code" labelWidth="0" borderBottom>
						<u--input v-model="model.password" border="none" placeholder="请输入登录密码"
							prefixIcon="lock-fill"></u--input>
					</u-form-item>
				</u-form>
			</u-form>
		</view>
		<view @click="onRegister" class="phone-btn">立即注册</view>
		<view class="policy">
			<u-checkbox-group width="50rpx" height="50rpx"><u-checkbox v-model="checked" shape="circle"
					@change="onChange"></u-checkbox></u-checkbox-group>
			<view class="xy">
				阅读并同意
				<text>用户协议</text>
				、
				<text>隐私政策</text>
				、
				<text>服务监督协议</text>
			</view>
		</view>
		<u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
			@end="disabled1 = false"></u-code>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				checked: false,
				model: {
					phone: '',
					code: '',
					password: '',
				},
				rules: {},
				tips: '',
				disabled1: false,
				config: store.state.config
			};
		},
		methods: {
			async onRegister() {
				if (!this.checked) return this.$u.toast('请同意协议')
				if (!uni.$u.test.mobile(this.model.phone)) return this.$u.toast('请输入手机号')
				if (!this.model.code) return this.$u.toast('请输入验证码')
				if (!this.model.password) return this.$u.toast('请输入密码')

				await this.$request.post('login.registerByPhone', this.model)

				setTimeout(() => {
					this.$u.route({
						url: "/pages/login/loginH5",
						type: "redirectTo"
					})
				}, 1000)
				this.$u.toast(data.msg)
			},
			codeChange(text) {
				this.tips = text;
			},
			onChange() {
				this.checked = !this.checked;
			},
			async getCode() {
				if (!uni.$u.test.mobile(this.model.phone)) return this.$u.toast('请输入正确的手机号')
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});

					await this.$request.post('login.sendCode', {
						phone: this.model.phone,
						type: '_register'
					})

					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		},
		onLoad() {
			console.info(99999999999999999999)
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		.header {
			padding-top: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-weight: 600;
				font-size: 30rpx;
			}
		}

		.form {
			width: 90%;
			margin: 40rpx auto;

			.title {
				font-weight: 600;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}
		}

		.phone-btn {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: rgb(71, 128, 245);
			border-radius: 50rpx;
			margin-top: 100rpx;
			margin: 10rpx auto;
		}

		.new-user {
			margin: 20rpx auto;
			display: block;
			text-align: center;
		}

		.other-login {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-50%);

			text {
				font-size: 30rpx;
				color: #ccc;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				background: rgb(71, 128, 245);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 50%;
					height: 60%;
				}
			}
		}

		.policy {
			width: 90%;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);

			.xy {
				font-size: 24rpx;
				color: #ccc;
				margin-left: 6rpx;

				text {
					color: rgb(71, 128, 245);
				}
			}
		}
	}
</style>